<template>
  <div id="waybillledger">
    <h1 class="titleTag">运单台账</h1>
    <el-form :inline="true" :model="ruleForm" ref="ruleForm" class="mt24">
      <el-form-item>
        <el-input v-model="ruleForm.number" placeholder="运单号" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select style="width: 144px;" v-model="ruleForm.value2" placeholder="选择时间" size="small">
          <el-option width="100" v-for="item in ruleForm.options2" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-form-item>
          <el-date-picker type="datetime" placeholder="请选择开始时间" v-model="ruleForm.time" default-time="12:00:00"
            style="width: 100%;" size="small"></el-date-picker>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-form-item>
          <el-date-picker type="datetime" placeholder="请选择开始时间" v-model="ruleForm.time2" default-time="12:00:00"
            style="width: 100%;" size="small"></el-date-picker>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="resetForm('ruleForm')">清空</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="tableDetail">
      <el-table :data="tableData" height="634" border style="width: 100%;">
        <el-table-column header-align="center"  label="基本信息" min-width="250">
          <template slot-scope="data">
            <div class="fb"><span>状态</span><span class="CYAN">{{ data.row.status }}</span></div>
            <div class="fb"><span>货源单号</span><span class="BLUE">{{ data.row.number1 }}</span></div>
            <div class="fb"><span>发货联系人</span><span>{{ data.row.number2 }}</span></div>
            <div class="fb"><span>发货联系电话</span><span>{{ data.row.number3 }}</span></div>
            <div class="fb"><span>收货联系人</span><span>{{ data.row.number4 }}</span></div>
            <div class="fb"><span>收货联系电话</span><span>{{ data.row.number5 }}</span></div>
            <div class="fb"><span>司机姓名</span><span>{{ data.row.number4 }}</span></div>
            <div class="fb"><span>司机电话</span><span>{{ data.row.number3 }}</span></div>
            <div class="fb"><span>车牌号</span><span>{{ data.row.number3 }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="行程" min-width="280">
          <template slot-scope="data">
            <div class="fb"><span>起始城市</span><span>{{ data.row.number7 }}</span></div>
            <div class="fb"><span>目的地城市</span><span>{{ data.row.number8 }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="运费" min-width="186">
          <template slot-scope="data">
            <div class="fb"><span>运费单价</span><span>{{ data.row.number9 }}</span></div>
            <div class="fb"><span>预估总价</span><span>{{ data.row.number10 }}</span></div>
            <div class="fb"><span>付款方式</span><span>{{ data.row.number11 }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="货物信息" min-width="186">
          <template slot-scope="data">
            <div class="fb"><span>货物名称</span><span>{{ data.row.number12 }}</span></div>
            <div class="fb"><span>订单量</span><span>{{ data.row.number13 }}</span></div>
            <div class="fb"><span>运单量</span><span>{{ data.row.number13 }}</span></div>
            <div class="fb"><span>货物单位</span><span>{{ data.row.number14 }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="时间" min-width="260">
          <template slot-scope="data">
            <div class="fb"><span>客户下单时间</span><span>{{ data.row.number16 }}</span></div>
            <div class="fb"><span>要求发货时间</span><span>{{ data.row.number17 }}</span></div>
            <div class="fb"><span>要求到货时间</span><span>{{ data.row.number18 }}</span></div>
            <div class="fb"><span>要求回单时间</span><span>{{ data.row.number19 }}</span></div>
            <div class="fb"><span>订单生成时间</span><span>{{ data.row.number20 }}</span></div>
            <div class="fb"><span>运单生成时间</span><span>{{ data.row.number20 }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="其他" min-width="190">
          <template slot-scope="data">
            <div class="fb"><span>需求车型</span><span>{{ data.row.number21 }}</span></div>
            <div class="fb"><span>需求车长</span><span>{{ data.row.number21 }}</span></div>
            <div class="fb"><span>车辆载重</span><span>{{ data.row.number21 }}</span></div>
            <div class="fb"><span>允许损耗</span><span>{{ data.row.number21 }}</span></div>
            <div class="fb"><span>备注</span><span>{{ data.row.number21 }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="" label="操作" min-width="100">
          <template slot-scope="scope">
            <div><el-button @click="deleteSure(scope.row)" type="text" size="small">删除</el-button></div>
            <div><el-button @click="dialogTableVisible = true"  type="text" size="small">查看回单</el-button></div>
            <div><el-button type="text" size="small">查看路径</el-button></div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确定要删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="营业执照" :visible.sync="dialogTableVisible">
      <img style="width:100%: overflow: hidden" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575982342296&di=9887afb312914ae41a047a4d15c62c30&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190129%2Fa05e6d1a31734b54a3e139795ca06a4e.jpeg" alt="" srcset="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "waybillledger",
  data() {
    return {
      dialogVisible: false,
      dialogTableVisible: false,
      ruleForm: {
        number: "",
        value2: "",
        options2: [
          {
            value: "客户下单时间",
            label: "客户下单时间"
          },
          {
            value: "要求发货时间",
            label: "要求发货时间"
          },
          {
            value: "要求到货时间",
            label: "要求到货时间"
          },
          {
            value: "要求回单时间",
            label: "要求回单时间"
          },
          {
            value: "订单生成时间",
            label: "订单生成时间"
          },
          {
            value: "运单生成时间",
            label: "运单生成时间"
          }
        ],
        time: "",
        time2: ""
      },
      tableData: [
        {
          status: "待受理",
          number1: "D201911250001",
          number2: "增幅",
          number3: "15426333562",
          number4: "你好",
          number5: "15426333562",
          number6: "大宗",
          number7: "北京市-市辖区-海淀区",
          number8: "四川省-成都市-金牛区",
          number9: "90元/吨",
          number10: "90000元",
          number11: "月结",
          number12: "煤炭",
          number13: "1000",
          number14: "吨",
          number16: "2019.11.28-14.:25",
          number17: "2019.11.28-14.:25",
          number18: "2019.11.28-14.:25",
          number19: "2019.11.28-14.:25",
          number20: "2019.11.28-14.:25",
          number21: "————",
        },{
          status: "待受理",
          number1: "D201911250001",
          number2: "增幅",
          number3: "15426333562",
          number4: "你好",
          number5: "15426333562",
          number6: "大宗",
          number7: "北京市-市辖区-海淀区",
          number8: "四川省-成都市-金牛区",
          number9: "90元/吨",
          number10: "90000元",
          number11: "月结",
          number12: "煤炭",
          number13: "1000",
          number14: "吨",
          number16: "2019.11.28-14.:25",
          number17: "2019.11.28-14.:25",
          number18: "2019.11.28-14.:25",
          number19: "2019.11.28-14.:25",
          number20: "2019.11.28-14.:25",
          number21: "————",
        },
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 已报价
    offerYes() {
      this.navShow = false;
    },
    // 已报价
    offerNo() {
      this.navShow = true;
    },
    deleteSure() {
      this.dialogVisible = true;
    },
    // 清空
    resetForm(formName) {
      // this.$refs[formName].resetFields();
      this.ruleForm.number = ''
      this.ruleForm.value = ''
      this.ruleForm.value2 = ''
      this.ruleForm.time = ''
      this.ruleForm.time2 = ''
    }
  }
};
</script>

<style lang="scss" scoped>
#waybillledger {
  min-height: 100%;
  background-color: #fff;
  padding: 24px;
  box-sizing: border-box;
  .tableDetail span {
    line-height: 35px;
  }
  .dialog .price {
    color: $red;
  }
}
</style>
